<script setup lang="ts">
import AnimationDialog from '@/components/Dialog/AnimationDialog.vue'
import { useDialogStore } from '@/stores/dialog'

import { ref } from 'vue'
// import NewWord from '@/views/Word/Supply/SupplyWord.vue'
import NewWord from '@/views/World3D/World.vue'
import HeaderCom from '@/components/Layout/PageHeader/HeaderCom.vue'
import TopCom from './layout/TopCom.vue'

import AllLeft from '@/components/PermissionsModule/SupplyAllLeft.vue'
import AllRight from '@/components/PermissionsModule/SupplyAllRight.vue'
import InventoryFooter from '@/views/Supply/layout/InventoryFooter.vue'
import { roleStore } from '@/stores/role'
import { mapStore } from '@/stores/worldMap'
import { storeToRefs } from 'pinia'

// 库存数量
import SthCountBar from '@/components/PermissionsModule/Supply/components/SthCountBar.vue'
// 库存金额
import SthMoneyBar from '@/components/PermissionsModule/Supply/components/SthMoneyBar.vue'
// 入库出库数量展示
import InOutSthCountBar from '@/components/PermissionsModule/Supply/components/InOutSthCountBar.vue'
// 库存变化趋势
import GlobalInventoryTrendLine from '@/components/PermissionsModule/Supply/components/globalInventoryTrendLine.vue'
// top10出库金额占比
import Top10MoneyBar from '@/components/PermissionsModule/Supply/components/Top10MoneyBar.vue'
// top10出库数量占比
import Top10CountBar from '@/components/PermissionsModule/Supply/components/Top10CountBar.vue'
// 国家库存结构
import CountrySthBar from '@/components/PermissionsModule/Supply/components/CountrySthBar.vue'
// 库存变化趋势
import GlobalOutStockLine from '@/components/PermissionsModule/Supply/components/globalOutStockLine.vue'

const { restWorld, restChina } = storeToRefs(mapStore())

const rolesStore = roleStore()
const { supplyLevel } = rolesStore


const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
dialogInfo.visible = false

const worldMapStore = mapStore()

const toggleMap = ref(false) // 切换地图
toggleMap.value = worldMapStore.isChina

// 监听state
worldMapStore.$subscribe((mutation, state) => {
  toggleMap.value = state.isChina
})

/**
 * @description: 1 国家 2 区域 3 全球
 */
const newRole = ref(0)
newRole.value = supplyLevel // 初始化面板权限
// 监听state
rolesStore.$subscribe((mutation, state) => {
  newRole.value = state.supplyLevel
})

const dialogCB = ref(null)
dialogStore.$subscribe((mutation, state) => {
  dialogCB.value.changeDialogVisible(dialogInfo.visible)
})

const dialogInfoCB = {
  title: '', // 标题
  style: 'cb', // 动画风格 左上：lt 左中：lm 左下：lb 右上：rt 右中：rm 右下：rb
  width: '60%', // 自定义宽度
}

</script>

<template>
  <Layout :boxClassName="'supply-box'" :footerClassName="'bg-none'">
    <template v-slot:header>
      <HeaderCom class-name="supply-header" />
    </template>
    <template v-slot:top><TopCom /></template>
    <template v-slot:left><AllLeft /></template>
    <template v-slot:main>
      <NewWord v-if="!toggleMap" />
    </template>
    <template v-slot:right><AllRight /></template>
    <template v-slot:footer>
      <InventoryFooter />
    </template>
  </Layout>
  <AnimationDialog  ref="dialogCB" :dialogInfo="dialogInfoCB" @close="dialogInfo.visible=false">
    <div v-if="dialogInfo.visible">
      <SthCountBar v-if="dialogInfo.componentName == 'SthCountBar'" :level="newRole" />
      <SthMoneyBar v-if="dialogInfo.componentName == 'SthMoneyBar'" :level="newRole" />
      <GlobalInventoryTrendLine v-if="dialogInfo.componentName == 'GlobalInventoryTrendLine'" :level="newRole" />
      <InOutSthCountBar v-if="dialogInfo.componentName == 'InOutSthCountBar'" :level="newRole" />
      <Top10MoneyBar v-if="dialogInfo.componentName == 'Top10MoneyBar'" :level="newRole" />
      <Top10CountBar v-if="dialogInfo.componentName == 'Top10CountBar'" :level="newRole" />
      <CountrySthBar v-if="dialogInfo.componentName == 'CountrySthBar'" :level="newRole" />
      <GlobalOutStockLine v-if="dialogInfo.componentName == 'GlobalOutStockLine'" :level="newRole" />
    </div>
  </AnimationDialog>
</template>
